<!--
 * @Description: 数据导入
 * @Author: 0001101008/HuYuxi
 * @Date: 2021-09-23 08:38:47
 * @LastEditTime: 2021-09-29 11:05:20
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <el-dialog
    title="数据导入"
    class="dialog-box"
    width="450px"
    :visible.sync="errorStatus"
    :close-on-click-modal="false"
    @close="cancle"
  >
    <el-upload
      class="upload-box"
      ref="upload"
      auto-upload
      :http-request="handleUpload"
      accept=".xlsx, .xls"
      :show-file-list="false"
    >
      <el-button slot="trigger" ref="uploadBtn" size="small" type="success">
        选择文件
        <i class="el-icon-upload el-icon--right"></i>
      </el-button>
      <span class="ne-tips">文件中网元数量最多为100个</span>
    </el-upload>
    <el-alert type="warning" show-icon>
      <p slot="title">
        上传格式仅限：.xlsx, .xls，参考：
        <span class="template-file" @click="uploadTemplate">模板.xlsx</span>
      </p>
    </el-alert>
    <div v-if="errAry.length >0" class="error-box">
      <el-alert
        v-for="(item, index) in errAry"
        :key="index"
        type="error"
        show-icon
        @close="closeAlert(index)"
        class="error-alert"
      >
        <span slot="title">网元 {{item.name}} {{item.value}}</span>
      </el-alert>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'upload',
  props: ['errorStatus', 'errAry', 'show'],
  methods: {
    // 取消
    cancle () {
      this.$emit('closeDiag', false);
    },
    // 下载模板
    uploadTemplate () {
      let _this = this;
      _this.$http.downloadPost({
        url: '/api/sdwan/ne/download'
      }).then(res => {
        const filename = res.headers["content-disposition"];
        const blob = new Blob([res.data]);
        let downloadElement = document.createElement("a");
        let href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        downloadElement.download = decodeURIComponent(filename.split("filename=")[1]);
        document.body.appendChild(downloadElement);
        downloadElement.click();
        document.body.removeChild(downloadElement);
        window.URL.revokeObjectURL(href);
      });
    },
    // 批量上传 自定义上传实现
    handleUpload (file) {
      let _this = this;
      const param = new FormData();
      param.append('file', file.file);
      param.append('strategy', 'false');
      _this.$http.post({
        url: '/api/sdwan/ne/importExcel',
        data: param
      }).then(res => {
        let { status } = res;
        if (status === '0') {
          _this.$ws.registerDgQueueListener('importExcel', this.dealStart);
        }
      });
    },
    // 处理结果推送
    dealStart (data) {
      if (data) {
        if (data.payload && data.payload.completed) {
          this.$message.success('执行成功！');
          this.$parent.refresh();
          this.cancle();
          this.$ws.unregisterDgQueueListener(this.dealStart);
        } else {
          if (data.payload.errorMessage) {
            this.$message.error(data.payload.errorMessage);
          } else {
            let payload = data.payload;
            let errors = payload.errors;
            let list = [];
            for (let key in errors) {
              if (errors.hasOwnProperty(key)) {
                list.push({
                  name: key,
                  value: errors[key]
                });
              }
            }
            this.errAry = list;
            this.$message.error('执行失败！');
            this.$ws.unregisterDgQueueListener(this.dealStart);
          }
        }
      }
    },
    // 删除报错
    closeAlert (index) {
      this.errAry.splice(index, 1);
    }
  }
};
</script>
<style lang="scss" scoped>
.upload-box {
  margin-bottom: 15px;
  .el-upload:hover + .ne-tips {
    display: inline-block;
  }
  .ne-tips {
    font-size: 13px;
    margin-left: 8px;
    color: #e6a23c;
    display: none;
  }
}
.template-file {
  color: #409eff;
  text-decoration: underline;
  cursor: pointer;
}
.error-box {
  .error-alert {
    margin-top: 3px;
  }
}
::v-deep .el-dialog__body {
  max-height: 200px;
  overflow: auto;
  padding: 15px 20px;
}
</style>
